<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
<body>

<div id="app">

    <div class="demo-input-size">
        <el-input
                size="small"
                placeholder="请输入姓名"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.name"
        >
        </el-input>

        <el-input
                size="small"
                placeholder="请输入最小年龄"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.minAge"
        >
        </el-input>

        <el-input
                size="small"
                placeholder="请输入最大年龄"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.maxAge"
        >
        </el-input>
        <el-button type="primary" @click="searchPatient()">搜索</el-button>
        <!-- <el-button type="primary">主要按钮</el-button> -->
        </div>

    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="age"
                    label="年龄"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="sex"
                    label="性别"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="riqi"
                    label="日期"
                    width="200">
            </el-table-column>

            <el-table-column
                    prop="dname"
                    label="预约医师"
                    width="140">
            </el-table-column>

            <el-table-column
                    prop="kname"
                    label="预约科室"
                    width="120">
            </el-table-column>

            <el-table-column prop="state" label="状态"  width="100" align="center">
                <template slot-scope="scope">

                    <span v-if="scope.row.state == 0 || scope.row.state == 1" style="color: green">
                        <div class="status-icon icon1"></div>未处理
                    </span>

                    <span v-if="scope.row.state== 2" style="color: red">
                        <div class="status-icon icon0"></div>已处理
                    </span>

                </template>
            </el-table-column>


            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">

                <template v-if="scope.row.state == 0 || scope.row.state == 1">
                    <el-button type="primary" @click="handleClick(scope.row.id)">处理</el-button>
                </template>

                <template v-if="scope.row.state == 2">
                    <el-button type="warning" @click="update(scope.row.id)">修改</el-button>
                </template>

                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="allyuyuetotal">
    </el-pagination>

    <!--处理病人的窗口-->
    <el-dialog title="处理预约患者" :visible.sync="dialogFormVisible" style="margin-top: -40px">
        <el-form  ref="Info" :model="Info" label-width="80px" style="margin-left: 100px; ">

            <el-form-item label="姓名" >
                <el-input v-model="Info.name" :disabled="true" style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="年龄" >
                <el-input v-model="Info.age" :disabled="true" style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="性别" >
                <el-input v-model="Info.sex" :disabled="true" style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="患者病情" >
                <el-input v-model="Info.text" :disabled="true" style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="医生建议" >
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 3, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="Info.proposal"
                        style="width: 300px;">
                </el-input>
            </el-form-item>

            <el-form-item label="处理医生" >
                <el-input v-model="Info.dname" style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即处理</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--修改病人窗口-->
    <el-dialog title="修理已处理的预约患者" :visible.sync="undialogFormVisible" style="margin-top: -40px">
        <el-form  ref="Info" :model="Info" label-width="80px" style="margin-left: 100px; ">

            <el-form-item label="姓名" >
                <el-input v-model="Info.name" :disabled="true" style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="年龄" >
                <el-input v-model="Info.age" :disabled="true" style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="性别" >
                <el-input v-model="Info.sex" :disabled="true" style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="患者病情" >
                <el-input v-model="Info.text" :disabled="true" style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="医生建议" >
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 3, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="Info.proposal"
                        style="width: 300px;">
                </el-input>
            </el-form-item>

            <el-form-item label="处理医生" >
                <el-input v-model="Info.dname" style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即处理</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


</div>

<script>


    var haha = new Vue({
        el:"#app",
        data:{
            searchInfo:{},
            tableData:[],
            dialogFormVisible:false,
            undialogFormVisible:false,
            Info:{},
            allyuyuetotal:0
        },
        methods:{
            searchPatient(){
                getDate(1,10);
            },
            handleCurrentChange(val){
                getDate(val,10);
            },
            update(id){
                $.post("/ssm/patient/update/"+id,haha.info,function (backData) {
                    haha.undialogFormVisible = true;
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            onSubmit() {
                $.post("/ssm/patient/add",haha.Info,function (backData) {
                    if ( backData.code == 1 ){
                        haha.$message.success('您已处理该病人的预约');
                         haha.dialogFormVisible = false;
                         window.location.href = "/ssm/showyy.html";
                    } else {
                        haha.$message.error('处理失败，请重试');
                        window.location.href = "/ssm/showyy.html";
                    }
                })
            },
            handleClick(id){
                $.get("/ssm/patient/query/"+id,function (backData) {
                    haha.Info = backData.data;
                    haha.dialogFormVisible = true;
                });
            }
        }
    });


    function getDate(a,b){
        haha.searchInfo.pageNo = a;
        haha.searchInfo.pageCount = b;

        $.post("/ssm/patient/list",haha.searchInfo,function (backData) {
                haha.tableData = backData.data.allyuyue;
                haha.allyuyuetotal = backData.data.allyuyuetotal;
        });
    }
    getDate(1,10);
</script>

</body>
</html>